<template>
  <div class="address-container">
    <van-nav-bar
      title="编辑地址"
      left-arrow
      :right-text="edit ? '完成' : '编辑'"
      @click-left="$router.back()"
      @click-right="edit = !edit"
      class="navBar"
    />

    <van-cell-group class="Addresses">
      <van-cell v-for="item in Addresses" :key="item.id">
        <template slot="title"> {{ item.name }} --- {{ item.phone }} </template>
        <template slot="label">
          {{ item.address }}
        </template>
        <van-icon
          name="close"
          slot="right-icon"
          v-if="edit"
          @click="deleteAddress(item.id)"
        />
      </van-cell>
    </van-cell-group>

    <van-cell
      title="新增地址"
      is-link
      class="add"
      @click="$router.push('/profile/info/add')"
    />
  </div>
</template>

<script>
import { getAddresses, deleteAddress } from "@/api/profile";
import { mapState } from "vuex";

export default {
  data() {
    return {
      Addresses: [],
      edit: false,
    };
  },
  methods: {
    // 获取地址列表
    async getAddresses() {
      const { data } = await getAddresses(this.userInfo.user_id);
      this.Addresses = data;
    },
    // 删除地址
    async deleteAddress(id) {
      const { data } = await deleteAddress(this.userInfo.user_id, id);
      if (data.status === 1) {
        this.$toast.success("删除成功!");
        this.getAddresses();
      } else {
        this.$toast.fail("删除失败!");
      }
    },
  },
  created() {
    this.getAddresses();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.address-container {
  /deep/.navBar {
    margin-bottom: 10px;
    background-color: #4e7ee8;
    .van-nav-bar__title,
    .van-nav-bar__text,
    .van-icon-arrow-left {
      font-size: 18px;
      color: #fff;
    }
  }
  .Addresses {
    .van-cell {
      align-items: center;
      .van-cell__title {
        font-size: 16px;
        .van-cell__label {
          font-size: 14px;
        }
      }
      .van-icon-close {
        margin-left: 10px;
        font-size: 25px;
        color: #d90013;
      }
    }
  }
  .add {
    margin-top: 20px;
    font-size: 20px;
    color: #22a6f2;
    .van-cell__right-icon {
      color: #22a6f2;
    }
  }
}
</style>
